import { View, Text, Image } from '@tarojs/components'
import CloudIcons from '@/assets/ImageUrlConfig'
import './index.scss'
import { useEffect, useState } from 'react'
import { navigateTo, showToast } from '@tarojs/taro'
import { useSelector, useDispatch } from 'react-redux'
import { UpdateArticleApi, RemoveArticleApi, MoveArticleApi } from '@/api/index.js'

export default function ArticleOperation({ show, setShow, currentActiveArticleID }) {
	const dispatch = useDispatch()
	const userStore = useSelector((state) => state.user)
	const spaceStore = useSelector((state) => state.space)
	const articleStore = useSelector((state) => state.article)

	let timer
	const Amination_Timer = 200
	const [isShowMask, setIsShowMask] = useState(false)

	const [isShowSpaceDrawer, setIsShowSpaceDrawer] = useState(false)
	const [isShowArticleDrawer, setIsShowArticleDrawer] = useState(false)

	useEffect(() => {
		clearTimeout(timer)
		if (show) {
			setIsShowMask(true)
			timer = setTimeout(() => {
				setIsShowSpaceDrawer(false)
				setIsShowArticleDrawer(true)
			}, Amination_Timer)
			return
		}
		setIsShowSpaceDrawer(false)
		setIsShowArticleDrawer(false)
		timer = setTimeout(() => {
			setIsShowMask(false)
		}, Amination_Timer)
	}, [show])

	const editArticle = () => {
		navigateTo({
			url: `/pages/write/index?articleid=${currentActiveArticleID}`,
			events: {
				reciveArticle({ content, title }) {
					const articleid = currentActiveArticleID

					UpdateArticleApi({
						articleid,
						title,
						content,
					})
						.then(({ space, article }) => {
							dispatch({
								type: 'UPDATE_SPACE',
								payload: space,
							})
							dispatch({
								type: 'UPDATE_ARTICLE',
								payload: article,
							})
						})
						.catch(() => {
							showToast({
								title: '更新失败',
								icon: 'error',
								duration: 1000,
							})
						})
				},
			},
		})
	}

	const removeArticle = () => {
		RemoveArticleApi({
			id: currentActiveArticleID,
		})
			.then(({ space }) => {
				dispatch({
					type: 'UPDATE_SPACE',
					payload: space,
				})
				setIsShowSpaceDrawer(false)
				setIsShowArticleDrawer(false)
				setShow(false)
				// 如果删除的是正在查看的
				if (currentActiveArticleID === articleStore._id) {
					dispatch({
						type: 'UPDATE_ARTICLE',
						payload: null,
					})
				}
			})
			.catch(() => {
				showToast({
					title: '删除失败',
					icon: 'error',
					duration: 1000,
				})
			})
	}

	const moveArticle = () => {
		setIsShowSpaceDrawer(true)
		setIsShowArticleDrawer(false)
	}

	const changeBelongSpace = (space) => {
		MoveArticleApi({
			oldBelongSpaceid: spaceStore._id,
			newBelongSpaceid: space._id,
			articleid: currentActiveArticleID,
		})
			.then(({ space }) => {
				dispatch({
					type: 'UPDATE_SPACE',
					payload: space,
				})
			})
			.catch(() => {
				showToast({
					title: '移动失败',
					icon: 'error',
					duration: 1000,
				})
			})
	}

	const onTapMask = () => {
		if (isShowSpaceDrawer) {
			setShow(false)
			return
		}
		setIsShowSpaceDrawer(false)
		setIsShowArticleDrawer(true)
	}

	return (
		<View className={isShowMask ? 'mask' : 'mask hiden'} onTap={onTapMask}>
			{/* 文章操作列表 */}
			<View
				className={isShowArticleDrawer ? 'drawer-article-operation load' : 'drawer-article-operation'}
				onTap={(e) => {
					e.stopPropagation()
				}}
			>
				<View className='header'>蓝图</View>
				<View className='operation-list'>
					<View className='operation' onTap={editArticle}>
						<Image src={CloudIcons.changeName} className='img'></Image>
						<Text className='text'>编辑</Text>
					</View>
					<View className='operation' onTap={moveArticle}>
						<Image src={CloudIcons.move} className='img'></Image>
						<Text className='text'>移动</Text>
					</View>
				</View>

				<View className='operation-list mt-20'>
					<View className='operation' onTap={removeArticle}>
						<Image src={CloudIcons.delete2} className='img'></Image>
						<Text className='text'>删除</Text>
					</View>
				</View>
			</View>
			{/* 空间列表 */}
			<View
				className={isShowSpaceDrawer ? 'drawer-article-operation load' : 'drawer-article-operation'}
				onTap={(e) => {
					e.stopPropagation()
				}}
			>
				<View className='space-list'>
					{userStore.space?.map((space) => {
						return (
							<View
								className='space-item'
								onTap={() => {
									changeBelongSpace(space)
								}}
							>
								<Text className='name'>{space.name}</Text>
							</View>
						)
					})}
				</View>
			</View>
		</View>
	)
}
